<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        .in{
            height: 130px;
        }
        .inin{
            height: 50px;
        }
        .content{
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div class="content">
            <ul class="clear">
                <div id="one" width='100'>水电费</div>
                <div id="two" width='200'>消息称</div>
                <div id="three" width='300px'>从VB你</div>
                <li>
                    <span>嘻嘻哈哈</span>
                    <div class="in">
                        <div class="inin">gggsdfsfsdfs</div>
                    </div>
                </li>
                <li class="uu1" id="lol">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li class="lol">6</li>
                <li>7</li>
                <li class="pp">8</li>
            </ul>
            <div id="bottom">
                <div id="left">
                    <div id="right" class="jj">
                        <input type="text" name="myname" value="" placeholder="">
                        <input type="password" name="ee" value="" placeholder="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  
        往里找:
            children()       只找子元素
            find()           找后代元素
        往外找:
            parent()         父元素
            parents()        所有父级
            parentsUntil()   找到父级们,到指定的为止
            offsetParent()   获取已定位的父级
            closest()        逐级向上查找父级,返回找到的父级
        往后找:
            next()           紧邻着的一个同辈元素(后)
            nextAll()        紧邻着的所有同辈元素(后)
            nextUntil()      紧邻着的所有同辈元素,到指定的某个为止(后)
        往前找:
            prev()           紧邻着的一个同辈元素(前)
            prevAll()        紧邻着的所有同辈元素(前)
            prevUntil()      紧邻着的所有同辈元素,到指定的某个为止(前)
        找其他:
            siblings()       查找除了自己以外的所有同辈元素
    -->
    <script>
        $(function(){
            // ul 的儿子辈, (仅儿子辈    不是所有的后代)
            $('ul').children().css('border','2px solid red')

            // ul 的一个后代, class叫做 inin 的,(不仅仅是儿子辈, 只要是后代都行)
            $('ul').find('.inin').css('background','lightblue')

            // class 是 inin 的父级元素
            $('.inin').parent().css('height','160px')

            // class 是 inin 的所有父级元素
            $('.inin').parents().css('background','lightgreen')

            // class是inin的父级元素 到 .content这个父元素位置
            $('.inin').parentsUntil('.clear').css('border','10px solid orange')

            // class是inin 的标签, 往父级找, 找到是定位过的父级, position : fixed, relative, absolute 的
            $('.inin').offsetParent().css('border','10px solid #829033')

            // 向上遍历, 始于当前元素!
            $('.inin').closest('div').css('background','red')
        })
        $(function(){
            // class是uu1的元素 的 下一个兄弟元素
            $('.uu1').next().css('font-size','100px')

            // class是uu1的元素 的 下一个兄弟元素 的 后面所有的兄弟元素
            $('.uu1').next().nextAll().css('font-size','60px')

            // class是uu1的元素 的 下一个兄弟元素 到 class为lol 的元素
            $('.uu1').nextUntil('.lol').css('color','#129837')
        })
        $(function(){
            // class是pp的元素 的 上一个兄弟元素
            $('.pp').prev().css('color','#978699')

            // class是pp的元素 的 上面的所有兄弟元素
            $('.pp').prevAll().css('color','#674584')

            // class是pp的元素 的 上面的一个兄弟元素 到 指定的一个兄弟元素为止
            $('.pp').prevUntil('.uu1').css('color','#324312')
        })
        $(function(){
            // 除了class是lol以外的 其他所有同辈的元素
            $('.lol').siblings().css('visibility','hidden')
        })
    </script>
</body>
</html>